<template>
  <div>
    <h1>Home</h1>
    <div>
      <!-- 
            如果直接使用router-link组件进行导航，被称作为声明式路由导航
            router-link 声明式导航底层仍然使用的是编程式路由导航，已经默认帮我们解决了重复导航的bug
              -to属性：就是push方法接收的第一个参数location
              -replace属性：替换历史记录
              -tag属性：想要<router-link>渲染成某种标签，例如<li>,于是我们使用tag props类指定何种标签，同样它还是会监听点击，触发导航
              -active-class属性：设置链接激活时使用的 css 类名
         -->

      <router-link to="/home/news" tag="button" active-class="active"
        >新闻</router-link
      >
      <router-link
        :to="{
          path: '/home/music',
        }"
        tag="button"
        active-class="active"
        >音乐</router-link
      >
      <router-link
        :to="{
          name: 'Game',
        }"
        tag="button"
        active-class="active"
        >游戏</router-link
      >
    </div>
    <div>
      <router-link to="/home/news" replace>新闻replace</router-link>
      <router-link
        :to="{
          path: '/home/music',
        }"
        replace
        >音乐replace</router-link
      >
      <router-link
        :to="{
          name: 'Game',
        }"
        replace
        >游戏replace</router-link
      >
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'Home',
};
</script>
<style>
.active {
  background: orange;
}
</style>
